Layout Component

Reactにおいて，propsにReact.ReactElementを受け取り，それをレイアウトするコンポーネントを作る設計パターン

問題意識

useSelector(React Redux)やuseSWR(swr)，useRecoilValue(Recoil)などのデータを注入するフックをコンポーネント中に散らすとコンポーネントの結合度が上がる

ネストしたリソースを表示するときにコンポーネント階層がContainer→Presenter→Container→Presenterみたいになってしまう

テストもプレビューもできなくて困る

解決策

React.ReactNodeをpropsとして扱う「レイアウトするだけのコンポーネント」を作る

これをLayout Componentって呼ぼう

Vue.jsのNamed Slotと同じ発想

ネスト上位のContainerでネスト下位のContainerを呼んでReact.ReactNodeを組み立てておく

ネスト上位の「レイアウトのためのコンポーネント」に組み立てたReact.ReactNodeを渡す

テストするときは直接React.ReactNodeを組み立てて渡す

ネスト下位ContainerはRender Hookとかにしてしまうと楽かもしれない

複雑なSelectorを書かずに，適当にidを子Containerに渡すだけでよくなる